<template>
  <div class="home">
    <!--全局loading,控制接口请求devopsconfig数据的状态 -->
    <div class="loading">
      <Icon v-show="loading" size="25" type="ios-loading" />
    </div>
    <!--bar Nav元素是一个可以用作页面导航的连接组-->
    <nav class="home_bar">
      <span class="home_bar_title mr-15">网关配置中心</span>
      <NavBar mode="horizontal" :active-name="0" />
    </nav>
    <!--面包屑 -->
    <div class="home_bread">
      <NavBread @change="change" />
    </div>
    <!--内容 -->
    <div class="home_content">
      <transition mode="out-in" name="fade-transform">
        <!--当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行 -->
        <!--它会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作 -->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition mode="out-in" name="fade-transform">
        <keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
    </div>
    <footer class="home_footer">
      <p>版权信息©2015江苏金智教育信息股份有限公司苏ICP备10204514号</p>
    </footer>
  </div>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar";
import NavBread from "@/components/nav-bread/nav-bread";
export default {
  components: {
    NavBar,
    NavBread
  },
  name: "Home",
  data() {
    return {
      loading: true
    };
  },
  methods: {
    change() {}
  }
};
</script>
<style lang="stylus" scoped>
.home {
  height: 100vh
  display: flex
  flex-direction: column
  background: $grey-v1
  position: relative
  .loading {
    position: fixed
    right: 15px
    top: 0
    width: 30px
    height: 40px
    display: flex
    align-items: center
    justify-content: center
    >i {
      animation: turn 1s linear infinite
    }
  }
  &_bar {
    display: flex
    padding: 0 15px
    align-items: center
    background: #fff
    box-shadow: $shadow-v1
    &_title {
      font-size: 18px
      color: $grey-v2
    }
  }
  &_content {
    flex-grow: 1 // flex-grow属性都为1，则它们将等分剩余空间
    background: #fff
    margin: 0 15px 15px
    padding: 15px
    box-sizing: border-box
    margin-bottom: 0
    box-shadow: $shadow-v1
    border-radius: 5px
    overflow: hidden
  }
  &_footer {
    p {
      text-align: center
      height: 32px
      line-height: 32px
      font-size: 12px
      color: $grey-v3
    }
  }
}
</style>
